//banner
var banner = 'http://47.108.197.28:3000/banner'
$ajax({
  url: banner,
  success: res => {
    // console.log(res)
    var banners = res.banners;

    banners.splice(0, 10).forEach(item => {
      var { imageUrl,targetId} = item;
      
      var template = `           
     
            <li class="active bo" data-aid=${targetId}>
            <img src="${imageUrl}" alt="">
            </li>
     
       `
      $(".imgbox").prepend(template)

    });
    $(".bo").click(function(event){
      var {aid} = event.currentTarget.dataset
      location.href = `01bannerDetail.html?id=${aid}`
      
  })
  }
})

$(function () {
  var index = 0;
  // 点击右键，切换下一张
  $("#next").click(function () {

    index++;
    if (index > 9) {
      index = 0;
    }
    imgToggle(index, 1000)
  })
  // 点击左键，切换下一张

  $("#pre").click(function () {
    index--;
    if (index < 0) {
      index = 10;
    }
    imgToggle(index, 1000)
  })
  //点击对应焦点，对应图片显示
  $('.banner ol>li').click(function () {
    var num = $(this).index();
    // console.log(num)
    //   重置下标
    index = num;
    imgToggle(num, 1000);


  })
  // 封装
  function imgToggle(index, speed) {
    $('.banner ol>li').eq(index).addClass('active').siblings().removeClass('active')
    $('.imgbox li').eq(index).show().siblings().hide();
  }

  function slide() {
    time = setInterval(function () {
      // 调用右键的函数
      $("#next").click();
    }, 2000)
  }
  slide();
})


//hot

var hot = 'http://47.108.197.28:3000/top/playlist?order=hot'
$ajax({
  url: hot,
  success: res => {

    var playlists = res.playlists;

    playlists.splice(0, 8).forEach(item => {
      var { name, coverImgUrl, playCount,id } = item;
      var play = Math.floor(playCount / 10000) + "万";

      var template = `
               
                <div class="Popular-recommendation box-center ho" data-aid = ${id}>
                        <div>
                            <img src="${coverImgUrl}" alt="">
                            <div class="p-bottom">
                                <a href="" class="icon-play"></a>
                                <span class="icon-headset"></span>
                                <span class="nb">${play}</span>
                            </div>
                            <a href="">${name}</a>
                        </div>
                    
                    `
      $("#hot").prepend(template)

    });
    $(".ho").click(function(event){
      var {aid} = event.currentTarget.dataset
      location.href = `01bannerDetail.html?id=${aid}`
      
  })
  }
})


//album
var album = 'http://47.108.197.28:3000/top/album'
$ajax({
  url: album,
  success: res => {
    // console.log(res)
    var albums = res.albums;
    albums.splice(0, 5).forEach(item => {
      var { blurPicUrl, artist, name,id} = item;
      var template = `
            <div class="new-cd inline-block item" data-aid=${id}>
            <div class="cover relative">
                        <img src="${blurPicUrl}" alt="" class="absolute">
            </div>      
                        
                        <p>${name}</p>
                        <p class="gray">${artist.name}</p>
            
            </div>
            `
      $(".cover-container").prepend(template)


    })
    $(".item").click(function(event){
      var {aid} = event.currentTarget.dataset
      location.href=`01album.html?id=${aid}`
    })
  }
})

//toplist
var toplist = 'http://47.108.197.28:3000/toplist/detail';
$ajax({
  url: toplist,
  success: res => {
    // console.log(res)
    var list = res.list;
    list.slice(0, 3).forEach((item, index) => {
    //  console.log(item.tracks)
      var { coverImgUrl, name, tracks } = item;
      var template = `
        <img src="${coverImgUrl}" class="absolute" alt="">
      `;
      var top = `
        <a href="#" class="bold">${name}</a>
      `;
      $(".bd-hd").eq(index).prepend(template);
      $(".bs").eq(index).prepend(top);

      item.tracks.forEach((val, i) => {
          // console.log(val)
        var { first } = val;

        var sing = `
        <td><span style = "color: red">${i+1}</span> ${first}</td>
      `;
        $(".tabel_tr-content").eq(i).append(sing);
      })
    });

  }
})


//artist

var artist = 'http://47.108.197.28:3000/artist/list'
$ajax({
  url: artist,
  success: res => {
    var artists = res.artists;
    artists.slice(0, 5).forEach((item,index) => {
      var { img1v1Url, alias, name } = item;
      var template = `
      <div class="singer-hd fl">
          <img src="${img1v1Url}" alt="">               
      </div>
      <div class="singer-id fl">
            <p>${name}</p>
            <span class="gray">${alias}</span>
      </div>   `
     
      $(".singer-list").prepend(template)
      

    })
  }
})


//dj

var dj = 'http://47.108.197.28:3000/dj/toplist/popular'

$ajax({
  url: dj,
  success: res => {
    // console.log(res)
    var list = res.data.list;
    
    
     list.slice(0, 5).forEach((item,index) => {
      var { avatarUrl, nickName } = item;
      var template = `
      <div class="djer">
      <a href="#" class="fl">
          <img src="${avatarUrl}" alt="">
      </a>
      <div class="djer-id ">
          <p><a href="#">${nickName}</a></p>
          <span class="gray">心理学家、美食家陈立教授</span>
      </div>
      </div>
     `
      $(".dj-list").prepend(template)
     })
  }
})


//search
$(function(){
  
  $(".sreach>input").keyup(function(e){
    if(e.keyCode==13){
      var value = $(this).val();
      location.href = `02search.html?id=${value}`
    }
  })
})